Sistema de Login y Registro con Autenticación JWT#6
Sistema de Login y Registro con Autenticación JWT#6JMLTUnderCode wants to merge 23 commits intomainfrom
Conversation
…n handler y se agrega a la funcionalidad del boton.
…este logeado. Siempre redireccionara a la startpage.
…hivo para LoginView
…del usuario que ha logeado y un boton de logout. El logout aprovecha la funcion provista por el context authentication
…ica de guardado en localstorage. Actualizacion de tipos.
…usion de tipos y acciones para Authentication context, provider, state
…ege la ruta main en caso de no haber login activo. Se incluye la pagina principal
…es desde localhost usando proxy
… Se cuenta con 3 acciones clave, login que guardan el token JWT de acceso y refresco junto a la informacion del usuario. Logout resetea el estado. Login failed actualiza los intentos fallidos de login.
…de login view y se redireciona a la vista de login. Falta manejar errores de registro y en caso de error de peticion
JMLTUnderCode
added
enhancement
There was a problem hiding this comment.
Pull Request Overview
This PR implements a complete authentication system with JWT tokens for the Clontube frontend, integrating login and registration functionality with a deployed Django REST backend. The implementation follows React best practices with context providers, reducers, and protected routes.
Key changes include:
- Authentication state management with JWT token persistence
- Protected routing system with automatic redirects
- Login/registration forms with API integration
Reviewed Changes
Copilot reviewed 17 out of 20 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added commented proxy configuration for API routing |
| src/utils/types.ts | Added authentication types and renamed existing types for consistency |
| src/reducers/loginViewReducer.ts | Updated type references and removed unused code |
| src/reducers/authenticationReducer.ts | New reducer for authentication state management |
| src/providers/LoginViewProvider.tsx | Updated imports and added localStorage sync function |
| src/providers/AuthenticationProvider.tsx | New provider for authentication context |
| src/pages/MainPage.tsx | New main page with logout functionality |
| src/main.tsx | Wrapped app with AuthenticationProvider |
| src/hooks/useLoginView.ts | Fixed import path casing |
| src/hooks/useAuthentication.ts | New hook for authentication context |
| src/contexts/AuthenticationContext.tsx | New authentication context |
| src/components/ProtectedRoute.tsx | New component for route protection |
| src/components/FormLogin.tsx | Added login functionality and navigation |
| src/App.tsx | Added routing configuration with protected routes |
| package.json | Added react-router-dom dependency |
| backend/settings.py | Added CORS configuration for frontend integration |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
…oryrauter para solucion a error de useNavigate
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 20 out of 23 changed files in this pull request and generated 4 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| /*React.useEffect(() => { | ||
| updateLocalStorageLoginView(state); | ||
| }, [state]); | ||
| */ | ||
|
|
There was a problem hiding this comment.
This commented out useEffect should either be implemented or removed entirely. Commented code blocks create confusion about intended functionality.
| /*React.useEffect(() => { | |
| updateLocalStorageLoginView(state); | |
| }, [state]); | |
| */ | |
| React.useEffect(() => { | |
| updateLocalStorageLoginView(state); | |
| }, [state]); |
| /* | ||
| server: { | ||
| proxy: { | ||
| '/api': { | ||
| target: 'https://backend-9tcm.onrender.com', | ||
| changeOrigin: true, | ||
| secure: false, | ||
| }, | ||
| } | ||
| } */ No newline at end of file |
There was a problem hiding this comment.
This commented proxy configuration should be removed if not needed, or properly integrated into the config object if it serves a purpose for development.
| // Manejar error de registro | ||
| } | ||
| } catch { | ||
| // Manejar error de peticion |
There was a problem hiding this comment.
Empty catch and error handling blocks provide no feedback to users. These should implement proper error handling with user-facing messages or logging.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 participant
Pull Request: Sistema de Login y Registro con Autenticación JWT
Resumen
Este PR implementa el sistema completo de login y registro de usuarios en el frontend de Clontube, integrando la autenticación JWT con el backend Django REST desplegado en Render. Se siguen buenas prácticas de ReactJS, separación de responsabilidades y seguridad en el manejo de tokens y rutas protegidas.
Cambios principales
1. Arquitectura de Autenticación
AuthenticationProvidercon contexto, reducer y custom hook para manejar el estado de autenticación global.localStoragepara persistencia de sesión./api/login/), recibe y almacena el token JWT.2. Gestión de rutas y navegación
react-router-dompara navegación eficiente entre páginas.BrowserRouterconbasename="/Clontube"para soportar despliegues en subdirectorios.useNavigate.MainPage.3. Componentes y flujo de UI
StartPagecontiene el sistema de login y registro.FormLoginmaneja el envío de credenciales, muestra errores y redirige tras login exitoso.FormRegisterpermite crear usuarios (sin iniciar sesión automáticamente).MainPagemuestra la sesión activa y permite cerrar sesión.4. CORS y seguridad
CORS_ALLOW_ALL_ORIGINSen producción y solo permitir orígenes necesarios.5. Testing y buenas prácticas
Archivos principales modificados/creados
src/providers/AuthenticationProvider.tsxsrc/hooks/useAuthentication.tssrc/reducers/authReducer.tssrc/pages/StartPage.tsxsrc/pages/MainPage.tsxsrc/components/FormLogin.tsxsrc/components/FormRegister.tsxsrc/App.tsxvite.config.tsbackend/settings.py(documentación y ejemplo de CORS)